<template>
    <div class="lwy-familyaccount">
        <div class="lwy-back">
            <router-link to="/happyhome/live/account"><i class="el-icon-arrow-left"></i>返回</router-link>
            <span class="expenditure">开支</span>
            /<router-link to="/HappyHome/live/ioperate"><span class="income">收入</span></router-link>

        </div>
        <div class="operate">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-input v-model="formInline.user" placeholder="请输入关键字"></el-input>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="text" @click="addAccouny = true">添加账单</el-button>
                    <el-button type="text" @click="details">账单详情</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="time" label="日期">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="category" label="类别">
                </el-table-column>
                <el-table-column prop="price" label="价格（元）">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="button-edit"
                            @click="editAccount(scope.row)">修改</el-button>
                        <el-popconfirm title="确定删除该条账单吗？" @confirm="delNotice(scope.row)">
                            <el-button type="text" size="small" slot="reference" class="button-del">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[3, 6, 18, 24]"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
                </el-pagination>
            </div>
            <!-- 添加账单弹框 -->
            <el-dialog title="添加账单" :visible.sync="addAccouny">
                <el-form :model="form">
                    <el-form-item label="时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="formLabelWidth">
                        <el-input v-model="form.category" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="价格（元）" :label-width="formLabelWidth">
                        <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addAccouny = false">取 消</el-button>
                    <el-button type="primary" @click="addAccount">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改账单弹框 -->
            <el-dialog title="修改账单" :visible.sync="editAccount1">
                <el-form :model="editform">
                    <el-form-item label="时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="editform.time" type="datetime" placeholder="选择日期时间"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="editform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="formLabelWidth">
                        <el-input v-model="editform.category" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="价格（元）" :label-width="formLabelWidth">
                        <el-input v-model="editform.price" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editAccount1 = false">取 消</el-button>
                    <el-button type="primary" @click="editAccount2(editform)">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import axios, { Axios } from "axios";
export default {
    data() {
        return {
            tableData: [],
            totalData: [],
            formInline: {
                user: ''
            },
            dialogTableVisible: false,
            addAccouny: false,
            editAccount1: false,
            activeName: 'first',
            check: false,
            limit: 3,
            form: {
                name: '',
                category: '',
                price: '',
                time: ''
            },
            editform: {
                id: '',
                name: '',
                category: '',
                price: '',
                time: ''
            },
            formLabelWidth: '100px',
            currentPage4: 1,
            totalPage:1,
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            }
        };

    },

    methods: {
        details() {
            this.$router.push({ path: '/happyhome/live/details', query: { data: this.totalData } })
        },
        rander() {
            axios({
                url: '/dbdata/family-account',
            }).then(({ data }) => {
                for (let i = 0; i < data.length; i++) {
                    let arrTime = data[i].time.split("T");
                    if (arrTime.length >= 2) {
                        data[i].time = arrTime[1].split(".");
                        data[i].time = arrTime[0] + " " + data[i].time[0];
                    }
                }
                this.totalData = data
                this.totalPage=this.totalData.length
                this.totalData.sort((a, b) =>
                new Date(b.time).getTime() - new Date(a.time).getTime()
                )
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit)
            })
        },
        // 修改赋值
        editAccount(row) {
            this.editform.time = row.time
            this.editform.name = row.name
            this.editform.category = row.category
            this.editform.price = row.price
            this.editform.id = row.id
            this.editAccount1 = true
        },
        // 搜索
        onSubmit() {
            axios({
                url: '/dbdata/family-account?q=' + this.formInline.user,
            }).then(({ data }) => {
                for (let i = 0; i < data.length; i++) {
                    let arrTime = data[i].time.split("T");
                    if (arrTime.length >= 2) {
                        data[i].time = arrTime[1].split(".");
                        data[i].time = arrTime[0] + " " + data[i].time[0];
                    }
                }
                this.totalData = data
                this.totalPage=this.totalData.length
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit)
                this.formInline.user = ''
            })
        },
        // 分页
        handleSizeChange(val) {
            this.limit = val;
            this.tableData = this.totalData.slice(0, this.limit)
        },
        handleCurrentChange(val) {
            this.currentPage4=val
            this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit);
        },
        // 添加
        addAccount() {
            axios({
                url: '/dbdata/family-account',
                method: 'post',
                data: this.form
            }).then(() => {
                this.rander()
                this.addAccouny = false
                this.$message.success('添加成功')
                this.form = {
                    name: '',
                    category: '',
                    price: '',
                    time: ''
                }
            })
        },
        // 修改
        editAccount2(v) {
            axios({
                url: '/dbdata/family-account/' + v.id,
                method: 'patch',
                data: this.editform
            }).then(() => {
                this.editAccount1 = false
                this.$message.success('修改成功')
                this.rander()
            })
        },
        // 删除
        delNotice(row) {
            axios({
                url: '/dbdata/family-account/' + row.id,
                method: 'delete'
            }).then(({ data }) => {
                this.totalData = data
                this.$message.success('删除成功')
                if (Math.ceil((this.totalData.length - 1) / this.limit) < this.currentPage4) {
                    this.currentPage4--
                }
                this.currentPage4=1
                this.rander()
            })
        }
    },
    mounted() {
        this.rander()
    }

}

</script>
<style  lang="less">
@wid: 100px;
@b-col: rgb(255, 233, 192);
@col: rgba(00, 00, 00, 0.8);
@bo-col: rgb(255, 233, 192);

.lwy-familyaccount {
    .lwy-back {
        text-align: left;
        margin-left: 5px;
        margin-top: 20px;

        a:-webkit-any-link {
            color: rgba(00, 00, 00, 0.67);
            text-decoration: none;

            .el-icon-arrow-left {
                margin-right: 5px;
                margin-left: 20px;
            }

        }

        .expenditure {
            color: #409EFF;
            margin-left: 20px;
            margin-right: 5px;
            font-size: 15px;
            font-weight: bold;
        }

        .income {
            color: #000;
            margin-left: 10px;
            font-size: 15px;
            font-weight: 550;
        }
    }

    .operate {
        margin-top: 20px;


        .el-form {
            text-align: left;
            margin-left: 40px;

            .el-input {
                width: 300px;
                margin-right: 20px;
            }

            .el-button--primary {
                width: @wid;
                background-color: @b-col;
                color: @col;
                border-color: @bo-col;

                &:hover {
                    background-color: rgba(255, 233, 192, 0.8);
                    color: rgba(00, 00, 00, 0.5);
                    border-color: rgba(255, 233, 192, 0.8);
                }
            }

            .el-button--text {
                width: @wid;
                background-color: @b-col;
                color: @col;
                border-color: @bo-col;
                margin-left: 20px;

                a:-webkit-any-link {
                    color: @col;
                    text-decoration: none;

                    .el-icon-arrow-left {
                        margin-right: 5px;
                    }
                }

                &:hover {
                    background-color: rgba(255, 233, 192, 0.8);
                    color: rgba(00, 00, 00, 0.5);
                    border-color: rgba(255, 233, 192, 0.8);
                }
            }
        }


        .el-table {
            width: 95% !important;
            margin-left: 35px;
            margin-top: 20px;
            border-radius: 0.5em;

            .el-table__cell {
                text-align: center;
            }

            .button-edit {
                background-color: rgba(255, 255, 255, 0.0) !important;
                width: 50px !important;

            }

            .button-del {
                background-color: rgba(255, 255, 255, 0.0) !important;
                width: 50px !important;
            }
        }

        .block {
            margin-top: 30px;
            margin-left: 500px;
        }

        .el-dialog {
            width: 36%;

            .el-form {
                margin-left: 0;

                .el-form-item {
                    width: 450px;
                }
            }

        }

        .check-table {
            margin-left: 15px;
        }


    }
}
</style>